<template>
  <div class="message">
 <div class="app-container_conter">
    <div class="message-top">
      <div class="message-top_btn">
        <el-button type="primary" :class="{'isactive':show==1}" @click="getInfo">人员审核</el-button>
        <span v-if="user_audit_count!=0">{{ user_audit_count }}</span>
      </div>
      <div class="message-top_btn">
        <el-button type="primary" :class="{'isactive':show==2}" @click="getInfo1">报案审核</el-button>
        <span v-if="report_audit_count!=0">{{report_audit_count}}</span>
      </div>
      <div class="message-top_btn">
        <el-button type="primary" :class="{'isactive':show==3}" @click="getInfo2">理赔结果</el-button>
        <span v-if="claims_results_count!=0">{{claims_results_count}}</span>
      </div>
    </div>
    <div class="message_info" v-if="show==1">
      <personnel-list></personnel-list>
    </div>

    <div class="message_info" v-if="show==2">
      <report-audit></report-audit>
    </div>
    <div class="message_info" v-if="show==3">
      <claim-result></claim-result>
    </div>
 </div>
  </div>
</template>

<script>
import {get_message_count} from '@/api/insurancemanagement/auditor'
import PersonnelList from "../../components/PersonnelList";
import ReportAudit from "../..//components/ReportAudit";
import ClaimResult from "../..//components/ClaimResult"
export default {
  name: "index",
  components:{
    PersonnelList,
    ReportAudit,
    ClaimResult
  },
  data() {
    return {
      show: 1,//对应的是数据展示显示隐藏
      user_id:'',//操作人id
      claims_results_count:'',//理赔结果
      report_audit_count:'',//报案审核数量
      user_audit_count:'',//人员审核
    }
  },
  methods: {
    //人员审核
    getInfo() {
      this.show = 1;
      this.getquery();
    },
    //报案审核
    getInfo1() {
      this.show = 2;
      this.getquery();
    },
    //理赔结果
    getInfo2() {
      this.show = 3;
      this.getquery();
    },
    getDetails(){

    },

    getDetails2(){
      this.$router.push({
        path: '/business/repordRecord/index'
      })
    },
    getquery(){
      get_message_count(this.user_id).then(res=>{
        if (res.code==1){
          this.all_count=res.data.all_count;
          this.$store.commit('all_count',res.data.all_count)
          // console.log('aaaa',this.$store.state.user.all_count)
          this.claims_results_count=res.data.claims_results_count;
          this.report_audit_count=res.data.report_audit_count;
          this.user_audit_count=res.data.user_audit_count;
        }
        // console.log('消息通知12',res);

      })
    }

  },
  created() {
    this.user_id = JSON.parse(localStorage.getItem('userInfo')).userId;
    this.getquery()
  }
}
</script>

<style scoped lang="scss">
.message {
  //background: pink;
  margin: 10px;
.message_item{
  table{
    border-collapse: collapse;
    margin: 0 auto;
    border: 1px solid #ece8e8;
    font-size: 15px;
    color: #333333;
    width: 500px;
    text-align: center;
  }
}
  .message-top {
    //background: plum;
    display: flex;
    //justify-content: center;

    .message-top_btn {
      position: relative;
      //background: pink;
      margin-right: 5px;

      .el-button {
        width: 200px;
        margin-right: 10px;
      }

      .isactive {
        background: peachpuff;
        border: none;
      }

      span {
        position: absolute;
        top: -5px;
        right: 5px;
        display: inline-block;
        width: 20px;
        height: 20px;
        font-size: 12px;
        border-radius: 50%;
        background: #FF4040;
        text-align: center;
        line-height: 20px;
        color: #FFFFFF;

      }
    }


  }

  .message_info {
    margin-top: 20px;
  }
}
</style>
